import React, { useEffect, useRef, useState } from "react";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable, ProFormText, ModalForm } from "@ant-design/pro-components";
import { listCostByPage } from "@/services/cost/api";
import message from "antd/es/message";
import {CostVO} from "@/services/cost/typings";

const CostControl: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [isCreate, setIsCreate] = useState<boolean>(false);
  const [current, setCurrent] = useState<CostVO>();
  const [isUpdate, setIsUpdate] = useState<boolean>(false);
  const [data, setData] = useState<CostVO[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (params: any) => {
    const res = await listCostByPage({
      params: params,
      pageNum: currentPage,
      pageSize: 10,
    });
    if (res.code!== 0) {
      message.error("成本数据加载失败 " + res.message);
      return;
    }
    setData(res?.data?.records || []);
    setTotal(res?.data?.total || 0);
  };


  const columns: ProColumns<CostVO>[] = [
    {
      title: '仓库名',
      width: 120,
      dataIndex: 'warehouseName',
    },
    {
      title: '生产商名',
      width: 120,
      dataIndex: 'manufacturerName',
    },
    {
      title: '金额',
      width: 120,
      hideInSearch: true,
      dataIndex: 'money',
    },
  ];

  useEffect(() => {
    loadData({});
  }, [currentPage]);

  return (
    <>
      <ProTable<CostVO>
        columns={columns}
        request={async (params) => {
          await loadData(params);
          return data;
        }}
        actionRef={actionRef}
        dataSource={data}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-cost',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) { },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 10,
          onChange: (page) => setCurrentPage(page),
          total: total,
        }}
        dateFormatter="string"
        headerTitle="成本管理"
        toolBarRender={() => [
        ]}
      />
      <ModalForm title="添加成本记录" open={isCreate}
        onFinish={async (values: any) => {
          // 假设存在添加成本的接口
          // const res = await addCost(values);
          // if (res.code!== 0) {
          //   message.error("成本记录添加失败 " + res.message);
          // } else {
          //   message.success('成本记录添加成功');
          //   setIsCreate(false);
          // }
        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setIsCreate(false),
        }}
        initialValues={{
          id: '',
          warehouseId: '',
          manufacturerId: '',
        }}
        autoFocusFirstInput>
        <ProFormText
          name="id"
          label="成本 ID"
          placeholder="请输入成本 ID"
        />
        <ProFormText
          name="warehouseId"
          label="仓库 ID"
          placeholder="请输入仓库 ID"
        />
        <ProFormText
          name="manufacturerId"
          label="制造商 ID"
          placeholder="请输入制造商 ID"
        />
      </ModalForm>
      <ModalForm title="修改成本记录信息" open={isUpdate}
        onFinish={async (values: any) => {
          // 假设存在更新成本的接口
          // const res = await updateCost({
          //   id: current?.id,
          //   ...values
          // });
          // if (res.code!== 0) {
          //   message.error("成本记录信息更新失败 " + res.message);
          // } else {
          //   message.success('成本记录信息更新成功');
          //   setIsUpdate(false);
          // }
        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setIsUpdate(false),
        }}
        initialValues={current}
        autoFocusFirstInput>
        <ProFormText
          readonly={true}
          name="id"
          label="成本 ID"
        />
        <ProFormText
          name="warehouseId"
          label="仓库 ID"
          placeholder="请输入仓库 ID"
        />
        <ProFormText
          name="manufacturerId"
          label="制造商 ID"
          placeholder="请输入制造商 ID"
        />
      </ModalForm>
    </>
  );
}

export default CostControl;
